import echarts from 'echarts' //导入echarts
import geoJson from '@/assets/data.json'//注册可用的地图，必须包括geo组件或者map图表类型的时候才可用
import 'echarts/map/js/china'//中国
import 'echarts/map/js/province/neimenggu'//省份......一个个引需要34个
/**写在一个文件中导入 */
import '../utils/allmap'
export default {
    install:(app, options)=>{
      // 配置此应用
    const myechart=()=>{
            return{
                //1.绘制条形图
                bar(id){
                     // 基于准备好的dom，初始化echarts实例
                     var myChart = echarts.init(document.getElementById(id));
                     // 指定图表的配置项和数据
                     var option={
                        title: {
                            text: '班级'
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: ['前端1', '前端2', 'java1', 'java2', '大数据1', '大数据2']
                        },
                        yAxis: {},
                        series: [{
                            name: '人数',
                            type: 'bar',
                            data: [35, 32, 36, 39, 42, 37],
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                              }
                        }]
                     }
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    },
                //2.绘制折线图
                line(id){
                    let myChart=echarts.init(document.getElementById(id))
                    let option={
                      title:{//标题组件，包含主标题和副标题。
                        // text:'会话量'
                      },
                      tooltip:{//提示框组件
                        trigger:'axis' //触发类型
                                       //'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                      },
                      legend:{//图例组件
                        data:["技术总监","产品经理","后端开发","前端开发","运维/测试"]
                      },
                      xAxis:{//直角坐标系 grid 中的 x 轴
                        type:'category',
                        data:["2018","2019","2020","2021","2022"]
                      },
                      yAxis:{//直角坐标系 grid 中的 y 轴
                        type:'value',
                      },
                      series:[
                                {
                                    "name": "技术总监",
                                    "type": "line",
                                    "stack": "总量",
                                    "data": [80,83,84,40,44,11,12]
                                },
                                {
                                    "name": "产品经理",
                                    "type": "line",
                                    "stack": "总量",
                                    "data": [66,34,39,42,45,20,30]
                                },
                                {
                                    "name": "后端开发",
                                    "type": "line",
                                    "stack": "总量",
                                    "data": [66,65,59,44,33,10,20]
                                },
                                {
                                    "name": "前端开发",
                                    "type": "line",
                                    "stack": "总量",
                                    "data": [33,33,44,55,55,11,23]
                                },
                                {
                                    "name": "运维/测试",
                                    "type": "line",
                                    "stack": "总量",
                                    "data": [33,55,44,66,77,11,3]
                                }
                            ]
                     }
                    myChart.setOption(option)
                },
                //3.中国地图--示例
                chinaMap(id){
                    let myChart=echarts.init(document.getElementById(id))
                    echarts.registerMap('china',geoJson)//注册可用的地图，必须包括geo组件或者map图表类型的时候才可用
                    let option={
                      backgroundColor:'rgb(121,145,209)',
                      geo:{
                        map:'china',
                        aspectScale:0.75,//地图缩放
                        zoom:1.1,//视图缩放比
                        itemStyle:{
                            normal:{
                              areaColor:{
                                type:'radial', //径向渐变
                                x:0.5,
                                y:0.5,
                                r:0.8,
                                colorStops:[
                                  {
                                    offset:0,
                                    color:'#09132c'  //0%处的颜色
                                  },
                                  {
                                    offset:1, 
                                    color:'#274d68'   //100%处的颜色
                                  },
                                ],
                                globalCoord:true
                              },
                              shadowColor: 'rgb(58, 115, 192)',
                              shadowOffsetX: 10,
                              shadowOffsetY: 11
                        },
                            regions:[{
                            name:'南海诸岛'
                            }]
                         },
                        regions: [{
                              name: '南海诸岛',
                              itemStyle: {
                                  opacity: 0
                              }
                          }] 
                       },
                      series:[
                        {//配置地图相关参数，绘制地图，这个对象是关于地图图表的相关配置
                          type:'map',
                          label: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            color: '#1DE9B6'
                                        }
                                    },
                                    emphasis: {
                                        textStyle: {
                                            color: 'rgb(183, 185, 14)'
                                        }
                                    }
                                },
                          zoom:1.1,//视图缩放比
                          map:'china',
                            itemStyle:{
                              normal:{
                                backgroundColor:'rgb(147,235,248)',
                                borderWidth:1,
                                areaColor:{
                                  type:'radial', //径向渐变
                                  x:0.5,
                                  y:0.5,
                                  r:0.8,
                                  colorStops:[
                                    {
                                      offset:0,
                                      color:'rgb(31,54,150)'  //0%处的颜色
                                    },
                                    {
                                      offset:1, 
                                      color:'rgb(89,128,142)'    //100%处的颜色
                                    },
                                  ],
                                  globalCoord:true
                                }
                              },
                              emphasis:{
                                areaColor:'rgb(46,229,206)',//区域显示颜色
                                borderWidth:0.1
                              }
                          },
                        }
                      ]
                    }
                    myChart.setOption(option)
                },
                //4.中国地图-就业分布
                chinaMap1(id) {
                    var myChart = echarts.init(document.getElementById(id));
                    var option = {
                        title:{//标题组件，包含主标题和副标题。
                            text:'学生就业分布'
                          },
                        tooltip: { //悬浮弹框
                            triggerOn: 'click', //提示框触发的条件
                            enterable: true,//鼠标是否可进入提示框浮层中，默认为false
                            formatter(item) {//item=下面serves里面的data里面的每一项 //[{} ] data={} a b c d 
                                // return item.name
                                return '<a href="#/city/'+item.name+'" style="color:#fff">省份：'+item.name+'，就业人数：'+item.value+'</a>'
                            }
                            // formatter:'{a}-{b}'
                        },
                        visualMap: [{ //映射高亮颜色
                            orient: "horizontal", //
                            type: "piecewise", //离散
                            bottom: 0,
                            textGap: 4,
                            itemGap: 4,
                            itemWidth: 10,
                            itemHeight: 10,
                            padding: 2,
                            textStyle: {
                                fontSize: 9,
                            },
                            pieces: [ // 配置颜色区间
                                {
                                    min: 0,
                                    max: 0,
                                    color: "#FFFFFF"
                                },
                                {
                                    min: 1,
                                    max: 9,
                                    color: "#FAEBD2"
                                },
                                {
                                    min: 10,
                                    max: 20,
                                    color: "#E9A188"
                                },
                                {
                                    min: 21,
                                    max: 50,
                                    color: "#D56355"
                                },
                                {
                                    min: 51,
                                    max: 100,
                                    color: "#BB3937"
                                },
                                {
                                    min: 100,
                                    max: 500,
                                    color: "#772526"
                                }
                            ]
                        }],
                        series: [{
                            name: "省",
                            type: "map", //地图  bar  line  map 
                            map: "china", //中国地图 需要引入地图china.js 
                            roam: false,
                            zoom: 1.2,
                            aspectScale: 0.75,
                            top: 40,
                            layoutCenter: ['5%', '5%'],
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 8
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: 'rgba(0,255,236,0)',
                                    borderColor: 'rgba(0,0,0,0.2)',
                                },
                                emphasis: { // 选中的区域颜色及阴影效果等
                                    areaColor: 'rgba(255,180,0,0.8)',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                }
                            },
                            // data
                            data: [
                                { name: '内蒙古', value: 3 },
                                { name: '北京', value:50 },
                                { name: '天津', value: 80 },
                                { name: '上海', value: 100 },
                                { name: '杭州', value: 80 },
                                { name: '湖北', value: 33 },
                                { name: '深圳', value: 20 },
                                { name: '安徽', value: 10 },
                                { name: '四川', value: 43 },
                                { name: '广东', value: 8 },
                                { name: '山西', value: 10 },
                                { name: '山东', value: 33 },
                                { name: '辽宁', value: 12 },
                                { name: '黑龙江', value:5 },
                                { name: '河北', value: 25 },
                                { name: '甘肃', value: 8 },
                                { name: '陕西', value: 20 },
                                { name: '湖南', value: 35 },
                                { name: '河南', value: 15 },
                                { name: '西藏', value: 2 },
                                { name: '新疆', value: 1 },
                                { name: '浙江', value: 30 },
                                { name: '江西', value: 5 },
                                { name: '贵州', value: 1 },
                                { name: '云南', value: 3 },


                            ]
                        }]
                    }
                    myChart.setOption(option);
                },
                //5.省份地图--就业分布2
                cityMap(id,cityname){
                    var myChart = echarts.init(document.getElementById(id));
                    var option = {
                        title:{//标题组件，包含主标题和副标题。
                            text:cityname+'----就业分布'
                          },
                        tooltip: {//悬浮弹框
                            triggerOn:'click',//提示框触发的条件
                            enterable: true,
                            formatter(data) {//[{} ] data={}
                                return data.name+',就业人数：'+data.value
                            }
                        },
                        visualMap: [{//映射高亮颜色
                            orient: "horizontal",//水平
                            type: "piecewise",//离散
                            bottom:0,
                            pieces: [ // 配置颜色区间
                                {
                                    min: 0,
                                    max: 0,
                                    color: "#FFFFFF"
                                },
                                {
                                    min: 1,
                                    max: 5,
                                    color: "#FDFDCF"
                                },
                                {
                                    min: 6,
                                    max: 10,
                                    color: "#FE9E83"
                                },
                                {
                                    min: 11,
                                    max: 30,
                                    color: "#E55A4E"
                                },
                                {
                                    min: 31,
                                    max: 100,
                                    color: '#CD5C5C'
                                }
                            ]
                        }],
                        series: [{
                            name: "市",
                            type: "map",//地图
                            map: cityname,//省份地图
                            roam: false,
                            zoom: 1.2,
                            aspectScale:0.75,
                            top:40,
                            layoutCenter:['5%', '5%'],
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 7
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: 'rgba(0,255,236,0)',
                                    borderColor: 'rgba(0,0,0,0.2)',
                                },
                                emphasis: { // 选中的区域颜色及阴影效果等
                                    areaColor: 'rgba(255,180,0,0.8)',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                }
                            },
                            data:[
                                {name:'北辰区',value:5},
                                {name:'西青区',value:32},
                                {name:'武清区',value:4},
                                {name:'蓟州区',value:6},
                                {name:'宝坻区',value:7},
                                {name:'宁河区',value:1},
                                {name:'红桥区',value:6},
                                {name:'河北区',value:12},
                                {name:'南开区',value:10},
                                {name:'津南区',value:15},
                                {name:'滨海新区',value:20},
                                {name:'静海区',value:5},
                                {name:'东丽区',value:6},
                                {name:'和平区',value:22},
                                {name:'河西区',value:5},
                                {name:'河东区',value:8}

                            ]
                        }]
                    }
                    myChart.setOption(option);
                },
                //6.中国地图，散点图，路径 综合
                AllMap(id){
                    let myChart=echarts.init(document.getElementById(id))
                    echarts.registerMap('china',geoJson)//注册可用的地图，必须包括geo组件或者map图表类型的时候才可用
                    let option={
                        backgroundColor:'rgb(121,145,209)',
                        geo:{
                        map:'china',
                        aspectScale:0.75,//地图缩放
                        zoom:1.1,//视图缩放比
                        itemStyle:{
                            normal:{
                                areaColor:{
                                type:'radial', //径向渐变
                                x:0.5,
                                y:0.5,
                                r:0.8,
                                colorStops:[
                                    {
                                    offset:0,
                                    color:'#09132c'  //0%处的颜色
                                    },
                                    {
                                    offset:1, 
                                    color:'#274d68'   //100%处的颜色
                                    },
                                ],
                                globalCoord:true
                                },
                                shadowColor: 'rgb(58, 115, 192)',
                                shadowOffsetX: 10,
                                shadowOffsetY: 11
                        },
                        regions:[{
                            name:'南海诸岛'
                        }]
                        },
                        regions: [{
                                name: '南海诸岛',
                                itemStyle: {
                                    opacity: 0
                                }
                            }] 
                        },
                        series:[
                        {//配置地图相关参数，绘制地图，这个对象是关于地图图表的相关配置
                            type:'map',
                            label: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            color: '#1DE9B6'
                                        }
                                    },
                                    emphasis: {
                                        textStyle: {
                                            color: 'rgb(183, 185, 14)'
                                        }
                                    }
                                },
                            zoom:1.1,//视图缩放比
                            map:'china',
                            itemStyle:{
                                normal:{
                                backgroundColor:'rgb(147,235,248)',
                                borderWidth:1,
                                areaColor:{
                                    type:'radial', //径向渐变
                                    x:0.5,
                                    y:0.5,
                                    r:0.8,
                                    colorStops:[
                                    {
                                        offset:0,
                                        color:'rgb(31,54,150)'  //0%处的颜色
                                    },
                                    {
                                        offset:1, 
                                        color:'rgb(89,128,142)'    //100%处的颜色
                                    },
                                    ],
                                    globalCoord:true
                                }
                                },
                                emphasis:{
                                areaColor:'rgb(46,229,206)',//区域显示颜色
                                borderWidth:0.1
                                }
                            },
                        },
                        {//关于地图中散点图的配置
                            type:'effectScatter',//散点
                            coordinateSystem:'geo',
                            showEffectOn:'render',//绘制完成后显示
                            SymbolSize:10,//散点大小
                            zlevel:1,
                            // data:points,
                            data:[
                            {
                                "value": [
                                    118.8062,
                                    31.9208
                                ],
                                "itemStyle": {
                                    "color": "#4ab2e5"
                                }
                            },
                            {
                                "value": [
                                    127.9688,
                                    45.368
                                ],
                                "itemStyle": {
                                    "color": "#4fb6d2"
                                }
                            },
                            {
                                "value": [
                                    110.3467,
                                    41.4899
                                ],
                                "itemStyle": {
                                    "color": "#52b9c7"
                                }
                            },
                            {
                                "value": [
                                    125.8154,
                                    44.2584
                                ],
                                "itemStyle": {
                                    "color": "#5abead"
                                }
                            },
                            {
                                "value": [
                                    116.4551,
                                    40.2539
                                ],
                                "itemStyle": {
                                    "color": "#f34e2b"
                                }
                            },
                            {
                                "value": [
                                    123.1238,
                                    42.1216
                                ],
                                "itemStyle": {
                                    "color": "#f56321"
                                }
                            },
                            {
                                "value": [
                                    114.4995,
                                    38.1006
                                ],
                                "itemStyle": {
                                    "color": "#f56f1c"
                                }
                            },
                            {
                                "value": [
                                    117.4219,
                                    39.4189
                                ],
                                "itemStyle": {
                                    "color": "#f58414"
                                }
                            },
                            {
                                "value": [
                                    112.3352,
                                    37.9413
                                ],
                                "itemStyle": {
                                    "color": "#f58f0e"
                                }
                            },
                            {
                                "value": [
                                    109.1162,
                                    34.2004
                                ],
                                "itemStyle": {
                                    "color": "#f5a305"
                                }
                            },
                            {
                                "value": [
                                    103.5901,
                                    36.3043
                                ],
                                "itemStyle": {
                                    "color": "#e7ab0b"
                                }
                            },
                            {
                                "value": [
                                    106.3586,
                                    38.1775
                                ],
                                "itemStyle": {
                                    "color": "#dfae10"
                                }
                            },
                            {
                                "value": [
                                    101.4038,
                                    36.8207
                                ],
                                "itemStyle": {
                                    "color": "#d5b314"
                                }
                            },
                            {
                                "value": [
                                    103.9526,
                                    30.7617
                                ],
                                "itemStyle": {
                                    "color": "#c1bb1f"
                                }
                            },
                            {
                                "value": [
                                    108.384366,
                                    30.439702
                                ],
                                "itemStyle": {
                                    "color": "#b9be23"
                                }
                            },
                            {
                                "value": [
                                    113.0823,
                                    28.2568
                                ],
                                "itemStyle": {
                                    "color": "#a6c62c"
                                }
                            },
                            {
                                "value": [
                                    102.9199,
                                    25.46639
                                ],
                                "itemStyle": {
                                    "color": "#96cc34"
                                }
                            },
                            {
                                "value": [
                                    119.4543,
                                    25.9222
                                ]
                            }
                                ],//数据---一个点的坐标及颜色
                            rippleEffect:{
                            period:15,
                            scale:4,
                            brushType:'fill'
                            }
                        },
                        {//关于地图中线路动画效果设置
                            type:'lines',
                            zlevel:2,
                            effect:{
                            show:true,
                            period:4,//动画周期
                            symbol:'arrow',//箭头
                            SymbolSize:7,//大小
                            trailLength:0.4//拖尾
                            },
                            lineStyle:{
                            normal:{
                                color:"#1DE9B6",
                                width:1,//线的宽度
                                opacity:0.1,//透明度
                                curveness:0.3//弯曲程度
                            }
                            },
                            // data:linesData,
                            data:[
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            118.8062,
                                            31.9208
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#4ab2e5"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            127.9688,
                                            45.368
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#4fb6d2"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            110.3467,
                                            41.4899
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#52b9c7"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            125.8154,
                                            44.2584
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#5abead"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            116.4551,
                                            40.2539
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#f34e2b"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                             39.4189
                                        ],
                                        [
                                            123.1238,
                                            42.1216
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#f56321"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            114.4995,
                                            38.1006
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#f56f1c"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            117.4219,
                                            39.4189
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#f58414"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            112.3352,
                                            37.9413
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#f58f0e"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            109.1162,
                                            34.2004
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#f5a305"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            103.5901,
                                            36.3043
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#e7ab0b"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            106.3586,
                                            38.1775
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#dfae10"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            101.4038,
                                            36.8207
                                        ],
                                    ],
                                    "lineStyle": {
                                        "color": "#d5b314"
                                    }
                                },
                                {
                                    "coords": [
                                      
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            103.9526,
                                            30.7617
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#c1bb1f"
                                    }
                                },
                                {
                                    "coords": [
                                        
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            108.384366,
                                            30.439702
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#b9be23"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            113.0823,
                                            28.2568
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#a6c62c"
                                    }
                                },
                                {
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                            39.4189
                                        ],
                                        [
                                            102.9199,
                                            25.46639
                                        ]
                                    ],
                                    "lineStyle": {
                                        "color": "#96cc34"
                                    }
                                },
                                {                           
                                    "coords": [
                                       
                                        [
                                            117.4219,
                                         39.4189
                                        ],
                                        [
                                            119.4543,
                                            25.9222
                                        ]
                                    ]
                                }
                            ]//数据--线路需要的左边及颜色
                        }
                        ]
                    }
                    myChart.setOption(option)
                  }
                }
      }
      app.provide('myechart',myechart)
    }
  }
